import {
    action,
    computed,
    observable,
    reaction,
    runInAction
} from 'mobx'

class Store {
    @observable array = [];
    @observable obj = {};
    @observable map = new Map();
    // 会自动识别，不用手动区分可观察还是间接观察
    @observable string = 'hello';
    @observable number = 20;
    @observable bool = false;

    @computed get mixed() {
        return store.string + '/' + store.number + '/'
    }
    @action bar() {
        this.string = 'world';
        this.number = 30;
    }
}

const store = new Store();

reaction(() => [store.string, store.number], arr => console.log(arr.join('/')))

store.bar(); // world/30
// 只有了一次的操作

// 或者可以使用 action.bound
// 将上面的 @action bar() 改为 @action.bound bar()
// 就可以下述这种操作
// const bar = store.bar;
// bar()


runInAction(() => {
    store.string = 'world';
    store.number = 30;
})
// runInAction 和调用 store.bar()效果相同
// 也可以加入一个修饰符,对于调试比较友好
runInAction('modify', () => {
    store.string = 'world';
    store.number = 30;
})